<!DOCTYPE html>
<html>    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">        
        <title>
            哇吖·城市探秘|上海滩杀人事件
        </title>
        <!-- Path to Framework7 Library CSS-->
        <link rel="stylesheet" href="../css/framework7.ios.min.css">
        <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
        <!-- Path to your custom app styles-->
        <link rel="stylesheet" href="../css/my-app.css">
    </head>
    <body style="-webkit-text-size-adjust:none;">
    <!-- Status bar overlay for full screen mode (PhoneGap) -->
    <div class="statusbar-overlay"></div>
    <!-- Views -->
    <div class="views">
      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center sliding">哇吖·城市探秘</div>
          </div>
        </div>
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
          <!-- Page, "data-page" contains page name -->
          <div data-page="treasure_hunter-1-presentation" class="page">
            <!-- Scrollable page content -->
            <div class="page-content">
              <div class="card pre_item">
                <div style="background-image:url(http://m.wayatrip.com/treasure_hunter/1/img/fazujie_map.png);
                height: 40vw;background-size: cover;background-position: center;" 
                valign="bottom" class="card-header color-white no-border">
                     上海滩杀人事件故事背景
                </div>
                <div class="card-content">
                  <div class="card-content-inner">
                   <p class="color-gray">100年前的法租界，随着商业的渐渐繁荣，租界内逐渐变得鱼龙混杂起来。巡捕、黑帮、洋人、市井小民等各式各样的人物，上演着一出出利益纠葛和恩怨情仇。这是最好的时代，也是最坏的时代.....</p>
                  </div>
                </div>
                <div class="card-footer"></div>
             </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="../js/framework7.js"></script>
    <script type="text/javascript">
      var myApp = new Framework7({
	   modalTitle: '哇吖旅行',
      });

      // Export selectors engine
      var $$ = Dom7;
      
      var mainView = myApp.addView('.view-main', {
    	  dynamicNavbar: true
        });
      
      var myPhotoBrowser = myApp.photoBrowser({
    	    photos : [
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/1.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/2.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/3.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/4.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/5.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/6.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/7.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/8.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/9.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/10.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/11.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/12.png',
    	        'http://m.wayatrip.com/treasure_hunter/1/img/presentation/13.png'
    	    ],
    	    type : 'popup',
    	    theme: 'dark',
    	    backLinkText:'',
    	    ofText: '/',
    	    expositionHideCaptions:true,
    	    toolbar:false,
    	    photoTemplate:'<div class="photo-browser-slide swiper-slide"><span class="photo-browser-zoom-container"><div style="width: 90%;height: auto;margin: 44px auto;"><img src="{{js "this.url || this"}}" style="width: 100%;"></div></span></div>'
    	});
      //Open photo browser on click
      $$('.pre_item').on('click', function () {
          myPhotoBrowser.open();
      });
      
      
      
    </script>
    </body>
</html>